<template>
  <!-- 失效 -->
  <div class="address-item-disabled" @mouseenter="showOperation" @mouseleave="hideOperation" v-if="item.is_delete === 1">
    <div class="address-name">{{ item.consignee }}</div>
    <div class="address-phone">{{ item.mobile }}</div>
    <div class="address-location">{{ item.province }} {{ item.city }} {{ item.district }}<br>{{ item.address_detail }}</div>
    <div class="address-edit" v-if="isShowOperation"><span class="address-edit-item" @click="edit">{{ $t('message.edit') }}</span></div>
    <div class="address-error-tips" v-else>{{$t('message.addrNotSupport')}}</div>
  </div>
  <!-- 有效 -->
  <div class="address-item" :class="{ selected: nowIndex === index }" @mouseenter="showOperation" @mouseleave="hideOperation" @click="chooseItem" v-else>
    <div class="address-name">{{ item.consignee }}</div>
    <div class="address-phone">{{ item.mobile }}</div>
    <div class="address-location">{{ item.province }} {{ item.city }} {{ item.district }}<br>{{ item.address_detail }}</div>
    <div class="address-edit" v-if="isShowOperation"><span class="address-edit-item" @click="edit">{{ $t('message.edit') }}</span><span @click="deleteItem()">{{ $t('message.deleted') }}</span></div>
    <div class="address-default" v-if="item.is_default === 1">{{ $t('message.defaultAddress') }}</div>
  </div>
</template>

<script>
export default {
  name: 'BuyAddressItem',
  props: {
    item: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      required: true
    },
    nowIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      isShowOperation: false
    }
  },
  methods: {
    // 修改
    edit () {
      this.$emit('edit', this.index)
    },
    // 显示修改和删除按钮
    showOperation () {
      this.isShowOperation = true
    },
    // 隐藏修改和删除按钮
    hideOperation () {
      this.isShowOperation = false
    },
    // 选择地址
    chooseItem () {
      this.$emit('choose-item', this.index)
    },
    // 删除
    deleteItem () {
      this.$emit('delete-address', this.item.address_id)
    }
  }
}
</script>

<style scoped>
.address-item {
  width: 222px;
  height: 167px;
  border: 1px solid #d6d6d6;
  padding: 18px;
  cursor: pointer;
  position: relative;
}

.address-item:hover, .selected {
  border: 1px solid #ff600a;
  background: url(../../assets/images/icon_check.png) no-repeat top right;
}

.address-item-disabled {
  width: 222px;
  height: 167px;
  border: 1px solid #d6d6d6;
  padding: 18px;
  cursor: pointer;
  position: relative;
}

.address-item-disabled:hover, .selected {
  border: 1px solid #ff600a;
}

.address-item-disabled .address-name, .address-item-disabled .address-phone, .address-item-disabled .address-location {
  color: #a5a5a5;
}

.address-item-disabled .address-error-tips {
  position: relative;
  color: #ff600a;
  margin-top: 12px;
  padding-left: 24px;
}

.address-item-disabled .address-error-tips::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 16px;
  height: 16px;
  background: url(../../assets/images/icon_errorTips.png) no-repeat
}

.address-name {
  max-width: 170px;
  max-height: 50px;
  line-height: 25px;
  font-size: 18px;
  color: #333;
  overflow-y: auto;
}

.address-phone {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #666;
  margin-top: 16px;
}

.address-location {
  line-height: 24px;
  font-size: 14px;
  color: #666;
  max-height: 72px;
  overflow: auto;
  margin-top: 8px;
}

.address-edit {
  height: 20px;
  line-height: 20px;
  color: #ff600a;
  font-size: 14px;
  position: absolute;
  bottom: 16px;
  right: 20px;
}

.address-edit-item {
  margin-right: 18px;
}

.address-default {
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: 20px;
  top: 26px;
  font-size: 12px;
  color: #a5a5a5;
}
</style>
